<template>
  <div class="my-api-container">
    <!-- 顶部标题区域 -->
    <div class="title-container">
      <div class="left">
        <i class="el-icon-warning"></i>
        <span>我的接口</span>
      </div>
      <div class="right">
        <!-- 顶部操作按钮 -->
        <el-button type="primary" class="primary-btn" @click="handleAddApi">
          <i class="el-icon-plus"></i> 添加接口
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-container">
      <el-input
        v-model="searchQuery"
        placeholder="搜索接口名称或描述"
        prefix-icon="el-icon-search"
        clearable
      />
      <el-select v-model="statusFilter" placeholder="状态筛选">
        <el-option label="全部" value="" />
        <el-option label="已发布" value="1" />
        <el-option label="已下架" value="0" />
        <el-option label="草稿" value="-1" />
      </el-select>
    </div>

    <!-- 表格区域 -->
    <div class="api-table-container">
      <el-table 
        class="api-table"
        v-loading="loading"
        :data="filteredApis"
        border
        stripe>
        <el-table-column label="接口名称" prop="name" />
        <el-table-column label="接口描述" prop="description" />
        <el-table-column label="请求方法" prop="rqsType" />
        <el-table-column label="接口地址" prop="apiurl" />
        <el-table-column label="状态" prop="status" :formatter="getStatusLabel" />
        <el-table-column label="更新时间" prop="updatetime" />
        <el-table-column label="调用次数" prop="call" />
        <el-table-column label="响应类型" prop="resType" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button 
              type="primary" 
              icon="el-icon-edit" 
              circle
              @click="editApi(scope.row)"
            ></el-button>
            <el-button 
              type="success" 
              icon="el-icon-upload2"
              circle
              @click="openPublishConfig(scope.row)"
            ></el-button>
            <el-button 
              type="warning"
              icon="el-icon-download"
              circle
              @click="toggleApiStatus(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-size="pageSize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>

    <!-- 对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showDialog"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form :model="apiForm" ref="apiForm" :rules="apiRules">
        <el-form-item label="接口名称" prop="name">
          <el-input v-model="apiForm.name" />
        </el-form-item>
        <el-form-item label="请求方法" prop="rqsType">
          <el-select v-model="apiForm.rqsType">
            <el-option label="GET" value="GET" />
            <el-option label="POST" value="POST" />
            <el-option label="PUT" value="PUT" />
            <el-option label="DELETE" value="DELETE" />
          </el-select>
        </el-form-item>
        <el-form-item label="接口地址" prop="apiurl">
          <el-input v-model="apiForm.apiurl" />
        </el-form-item>
        <el-form-item label="测试地址" prop="testurl">
          <el-input v-model="apiForm.testurl" />
        </el-form-item>
        <el-form-item label="接口描述" prop="description">
          <el-input 
            type="textarea" 
            v-model="apiForm.description"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitApiForm">确定</el-button>
      </template>
    </el-dialog>

    <!-- 发布配置对话框 -->
    <el-dialog
      title="发布配置"
      :visible.sync="showPublishDialog"
      width="60%"
      :close-on-click-modal="false"
      custom-class="publish-dialog"
    >
      <div class="publish-loading" v-if="publishLoading">
        <div class="loading-steps">
          <div class="step" :class="{ active: publishStep >= 1, done: publishStep > 1 }">
            <div class="step-icon">
              <i class="el-icon-upload" v-if="publishStep > 1"></i>
              <div class="loading-spinner" v-else-if="publishStep === 1">
                <svg viewBox="0 0 50 50" class="circular">
                  <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
                </svg>
              </div>
              <i class="el-icon-circle-check" v-if="publishStep > 1"></i>
            </div>
            <div class="step-content">
              <h4>提交配置</h4>
              <p>正在向服务器提交配置信息</p>
            </div>
            <div class="step-line"></div>
          </div>

          <div class="step" :class="{ active: publishStep >= 2, done: publishStep > 2 }">
            <div class="step-icon">
              <i class="el-icon-refresh" v-if="publishStep > 2"></i>
              <div class="loading-spinner" v-else-if="publishStep === 2">
                <svg viewBox="0 0 50 50" class="circular">
                  <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
                </svg>
              </div>
              <i class="el-icon-circle-check" v-if="publishStep > 2"></i>
            </div>
            <div class="step-content">
              <h4>等待生效</h4>
              <p>服务器正在处理配置信息</p>
            </div>
            <div class="step-line"></div>
          </div>

          <div class="step" :class="{ active: publishStep >= 3, done: publishStep === 3 }">
            <div class="step-icon">
              <i class="el-icon-circle-check" v-if="publishStep === 3"></i>
              <div class="loading-spinner" v-else-if="publishStep === 3">
                <svg viewBox="0 0 50 50" class="circular">
                  <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
                </svg>
              </div>
            </div>
            <div class="step-content">
              <h4>配置完成</h4>
              <p>新的配置已经生效</p>
            </div>
          </div>
        </div>
      </div>

      <el-form 
        :model="publishForm" 
        ref="publishForm" 
        :rules="parameterRules" 
        label-width="100px"
        v-loading="publishLoading"
        element-loading-text="请稍候..."
        element-loading-spinner="el-icon-loading"
      >
        <div class="publish-section">
          <h3><i class="el-icon-upload"></i> 发布策略</h3>
          
          <div class="deploy-type-select">
            <el-radio v-model="publishForm.deployType" label="gray">
              <div class="deploy-type-content">
                <div class="deploy-type-title">灰度发布</div>
                <div class="deploy-type-desc">根据API调用次数阈值控制访问量</div>
              </div>
            </el-radio>
            <el-radio v-model="publishForm.deployType" label="full">
              <div class="deploy-type-content">
                <div class="deploy-type-title">全量发布</div>
                <div class="deploy-type-desc">开放所有用户访问</div>
              </div>
            </el-radio>
          </div>

          <div v-if="publishForm.deployType === 'gray'" class="gray-scale-section">
            <div class="gray-scale-title">调用次数阈值设置</div>
            <el-slider
              v-model="publishForm.grayScale"
              :step="100"
              :min="100"
              :max="10000"
              :marks="{
                100: '100次',
                2500: '2500次',
                5000: '5000次',
                7500: '7500次',
                10000: '10000次'
              }"
            >
            </el-slider>
            <div class="gray-scale-tip">
              当前设置: API调用次数达到 {{ publishForm.grayScale }} 次后自动停止
            </div>
          </div>
        </div>

        <div class="publish-section">
          <h3><i class="el-icon-setting"></i> 参数配置</h3>
          <div class="parameters-table">
            <div class="parameter-header">
              <el-button type="primary" size="small" @click="addParameter">
                <i class="el-icon-plus"></i> 添加参数
              </el-button>
            </div>
            <el-table :data="publishForm.parameters" border stripe>
              <el-table-column label="参数名称" prop="name">
                <template #default="scope">
                  <el-input v-model="scope.row.name" placeholder="请输入参数名称"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="参数说明" prop="description">
                <template #default="scope">
                  <el-input v-model="scope.row.description" placeholder="请输入参数说明"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="参数类型" prop="type" width="120">
                <template #default="scope">
                  <el-select v-model="scope.row.type" placeholder="选择类型">
                    <el-option label="字符串" value="string"></el-option>
                    <el-option label="数字" value="number"></el-option>
                    <el-option label="布尔值" value="boolean"></el-option>
                    <el-option label="对象" value="object"></el-option>
                    <el-option label="数组" value="array"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="是否必填" width="80" align="center">
                <template #default="scope">
                  <el-switch v-model="scope.row.required"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80" align="center">
                <template #default="scope">
                  <el-button 
                    type="danger" 
                    icon="el-icon-delete" 
                    circle
                    size="mini"
                    @click="removeParameter(scope.$index)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-form>
      
      <template #footer>
        <el-button @click="showPublishDialog = false" :disabled="publishLoading">取消</el-button>
        <el-button 
          type="primary" 
          @click="submitPublishConfig"
          :loading="publishLoading"
          :disabled="publishLoading"
        >
          <i class="el-icon-upload2"></i> 确认发布
        </el-button>
      </template>
    </el-dialog>

    <!-- 添加审核失败原因对话框 -->
    <el-dialog
      title="审核失败原因"
      :visible.sync="showRejectReasonDialog"
      width="40%"
      custom-class="reject-reason-dialog"
    >
      <div class="reject-reason-content">
        <i class="el-icon-warning-outline reject-icon"></i>
        <div class="reason-text">{{ currentRejectReason }}</div>
      </div>
      <template #footer>
        <el-button type="primary" @click="showRejectReasonDialog = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';


export default {
  name: 'MyApi',
  data() {
    return {
      loading: false,
      // 统计数据
      stats: {
        published: 0,
        offline: 0,
        draft: 0
      },
      // 搜索和筛选
      searchQuery: '',
      statusFilter: '',
      // API 列表
      apis: [
        {
          apiid: 1,
          name: '测试API-1',
          description: '这是一个测试API接口',
          rqsType: 'GET',
          apiurl: '/api/test1',
          status: 1,
          updatetime: '2024-03-20',
          call: 1000,
          resType: 'JSON'
        },
        {
          apiid: 2, 
          name: '测试API-2',
          description: '这是另一个测试API接口',
          rqsType: 'POST',
          apiurl: '/api/test2',
          status: 0,
          updatetime: '2024-03-19',
          call: 500,
          resType: 'JSON'
        }
      ],
      // 对话框控制
      showDialog: false,
      dialogType: 'create', // 'create' 或 'edit'
      apiForm: {
        name: '',
        rqsType: 'GET',
        apiurl: '',
        testurl: '',
        description: '',
        resType: 'JSON',
        note: '无',
        isneedtoken: 0
      },
      // 表单验证规则
      apiRules: {
        name: [
          { required: true, message: '请输入接口名称', trigger: 'blur' }
        ],
        apiurl: [
          { required: true, message: '请输入接口地址', trigger: 'blur' }
        ],
        testurl: [
          { required: true, message: '请输入测试地址', trigger: 'blur' }
        ]
      },
      showPublishDialog: false,
      publishForm: {
        deployType: 'gray',
        grayScale: 1000,
        parameters: []
      },
      currentApi: null,
      parameterRules: {
        name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
        description: [{ required: true, message: '请输入参数说明', trigger: 'blur' }]
      },
      showRejectReasonDialog: false,
      currentRejectReason: '',
      publishLoading: false,
      publishStep: 0, // 0: 未开始, 1: 提交配置, 2: 等待生效, 3: 已生效
      baseUrl: config.baseUrl
    }
  },
  computed: {
    dialogTitle() {
      return this.dialogType === 'create' ? '创建新接口' : '编辑接口'
    },
    filteredApis() {
      return this.apis.filter(api => {
        const matchQuery = api.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          api.description.toLowerCase().includes(this.searchQuery.toLowerCase());
        const matchStatus = !this.statusFilter || api.status.toString() === this.statusFilter.toString();
        return matchQuery && matchStatus;
      });
    }
  },
  methods: {
    // 获取API列表
    async fetchApis() {
      this.loading = true;
      try {
        const response = await axios.get('/api/system/api/author/getApiList');
        this.apis = response.data.data || [];
        console.log('API列表数据:', this.apis); // 确认数据是否正确
        this.updateStats();
      } catch (error) {
        this.$message.error('获取接口列表失败: ' + error);
      } finally {
        this.loading = false;
      }
    },
    
    // 更新统计数据的方法
    updateStats() {
      if (!this.apis) return;
      this.stats = {
        published: this.apis.filter(api => api.status === 1).length,
        offline: this.apis.filter(api => api.status === 0).length,
        draft: this.apis.filter(api => api.status === -1 || api.status === -2).length
      };
    },
    
    // 创建新接口
    createApi() {
      this.dialogType = 'create'
      this.apiForm = {
        name: '',
        rqsType: 'GET',
        apiurl: '',
        testurl: '',
        description: '',
        resType: 'JSON',
        note: '无',
        isneedtoken: 0
      }
      this.showDialog = true
    },
    // 编辑接口
    editApi(api) {
      this.dialogType = 'edit'
      this.apiForm = { ...api }
      this.showDialog = true
    },
    // 切换接口状态
    async toggleApiStatus(api) {
      // 只有待发布状态可以发布为正常状态
      const canPublish = api.status === -1
      // 只有正常状态可以下架为异常状态
      const canTakeDown = api.status === 1
      
      if (!canPublish && !canTakeDown) {
        this.$message.warning('当前状态不允许进行此操作')
        return
      }
      
      const newStatus = canPublish ? 1 : 0
      const actionText = canPublish ? '发布' : '下架'
      
      try {
        await this.$confirm(`确定要${actionText}该接口吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await this.$axios.put(`/api/apis/${api.apiid}/status`, { status: newStatus })
        api.status = newStatus
        this.updateStats()
        this.$message.success(`${actionText}成功`)
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error(`${actionText}失败`)
        }
      }
    },
    // 提交表单
    async submitApiForm() {
      try {
        await this.$refs.apiForm.validate()
        
        if (this.dialogType === 'create') {
          await this.$axios.post('/api/apis', this.apiForm)
          this.$message.success('创建成功')
        } else {
          await this.$axios.put(`/api/apis/${this.apiForm.id}`, this.apiForm)
          this.$message.success('更新成功')
        }
        
        this.showDialog = false
        this.fetchApis()
      } catch (error) {
        this.$message.error('提交失败')
      }
    },
    // 格式化日期
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    },
    getStatusType(status) {
      const typeMap = {
        '0': 'danger',    // 已下架
        '1': 'success',   // 已发布
        '-1': 'info',     // 草稿
        '-3': 'danger'    // 审核失败
      };
      return typeMap[status.toString()] || 'warning';
    },
    getStatusLabel(status) {
      const labelMap = {
        '0': '已下架',
        '1': '已发布',
        '-1': '草稿',
        '-3': '审核失败'
      };
      return labelMap[status.toString()] || '未知状态';
    },
    // 打开发布配置对话框
    openPublishConfig(api) {
      this.currentApi = api
      this.publishForm = {
        deployType: 'gray',
        grayScale: 1000,
        parameters: [
          {
            name: '',
            description: '',
            required: true,
            type: 'string'
          }
        ]
      }
      this.showPublishDialog = true
    },
    // 添加参数
    addParameter() {
      this.publishForm.parameters.push({
        name: '',
        description: '',
        required: true,
        type: 'string'
      })
    },
    // 删除参数
    removeParameter(index) {
      this.publishForm.parameters.splice(index, 1)
    },
    // 提交发布配置
    async submitPublishConfig() {
      try {
        await this.$refs.publishForm.validate();
        

        this.publishLoading = true;
        this.publishStep = 1;

        const publishData = {
          apiId: this.currentApi.apiid,
          deployType: this.publishForm.deployType,
          grayScale: this.publishForm.deployType === 'gray' ? this.publishForm.grayScale : 10000,
          parameters: this.publishForm.parameters.map(param => ({
            name: param.name,
            description: param.description,
            required: param.required,
            type: param.type
          }))
        };

        // 显示加载提示
        const loadingInstance = this.$loading({
          lock: true,
          text: '正在提交配置...',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });

        // 提交配置
        const res = await axios.post('/api/system/publish/submitParms', publishData);
        
        if (res.data.code === 200) {
          this.publishStep = 2;
          loadingInstance.text = '等待配置生效...';
          
          // 等待2秒模拟配置生效过程
          await new Promise(resolve => setTimeout(resolve, 2000));
          
          this.publishStep = 3;
          loadingInstance.text = '配置已生效';
          
          // 再等待1秒后关闭
          await new Promise(resolve => setTimeout(resolve, 1000));
          
          loadingInstance.close();
          this.showPublishDialog = false;
          this.$message.success('发布配置成功');
          this.fetchApis();
        } else {
          loadingInstance.close();
          this.$message.error(res.data.msg || '发布配置失败');
        }
      } catch (error) {
        this.$message.error('发布配置失败');
      } finally {
        this.publishLoading = false;
        this.publishStep = 0;
      }
    },
    // 查看审核失败原因
    async viewRejectReason(api) {
      await axios.get(`/api/system/api/apiReject/${api.apiid}`).then(res => {
        this.currentRejectReason = res.data.data.reject || '未提供具体原因'
        this.showRejectReasonDialog = true
      })
    },
    // 重新发布
    async reSubmitApi(api) {
      try {
        await this.$axios.post(`/api/apis/resubmit/${api.apiid}`)
        this.$message.success('重新提交成功，请等待审核')
        this.fetchApis()
      } catch (error) {
        this.$message.error('重新提交失败')
      }
    },
    
    // 修改相关方法中的地址获取
    handleNodeClick(data) {
      this.currentNode = data;
      this.apiAddress = this.getApiAddress(data.apiid);
    }
  },
  mounted() {
    this.fetchApis()
  }
}
</script>

<style scoped>
/* 全局样式统一 */
.my-api-container {
  min-height: 100vh;
  background: #f0f2f5;
  padding: 24px;
  color: #334155;
}

/* 顶部标题区域 */
.title-container {
  background: #1a237e;
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.1), 
              0 9px 28px 0 rgba(0, 0, 0, 0.05), 
              0 12px 48px 16px rgba(0, 0, 0, 0.03);
}

.title-container .left {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
}

.title-container .left i {
  font-size: 24px;
  margin-right: 12px;
}

.title-container .right {
  display: flex;
  gap: 12px;
}

/* 搜索和筛选区域 */
.search-container {
  background: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* 表格容器 */
.api-table-container {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

/* 表格样式 */
.api-table {
  width: 100%;
}

.api-table :deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

.api-table :deep(.el-table th) {
  background-color: #1a237e !important;
  color: white !important;
  font-weight: 500;
  padding: 12px 0;
}

.api-table :deep(.el-table tr:hover td) {
  background-color: #f8fafc;
}

.api-table :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #f8f9fa;
}

/* 状态标签 */
.status-tag {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-tag.active {
  background-color: #e6f4ff;
  color: #1677ff;
  border: 1px solid #91caff;
}

.status-tag.inactive {
  background-color: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffe7ba;
}

.status-tag.pending {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-tag.error {
  background-color: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

/* 操作按钮 */
.operation-btn {
  margin: 0 4px;
}

.operation-btn.edit {
  color: #1677ff;
}

.operation-btn.view {
  color: #52c41a;
}

.operation-btn.delete {
  color: #ff4d4f;
}

/* 分页器 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 表单对话框 */
.api-dialog :deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

.api-dialog :deep(.el-dialog__header) {
  background: #1a237e;
  padding: 20px;
  margin-right: 0;
}

.api-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 18px;
  line-height: 24px;
}

.api-dialog :deep(.el-dialog__headerbtn) {
  top: 20px;
}

.api-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: rgba(255, 255, 255, 0.9);
}

.api-dialog :deep(.el-dialog__body) {
  padding: 30px 20px;
}

.api-dialog :deep(.el-dialog__footer) {
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
}

/* 表单样式 */
.api-form :deep(.el-form-item__label) {
  font-weight: 500;
}

.api-form :deep(.el-input__inner) {
  border-radius: 6px;
}

.api-form :deep(.el-textarea__inner) {
  border-radius: 6px;
}

.api-form :deep(.el-input-number__increase),
.api-form :deep(.el-input-number__decrease) {
  border-radius: 0;
}

/* 详情内容 */
.detail-section {
  margin-bottom: 24px;
}

.detail-section-title {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  color: #1a237e;
}

.detail-item {
  margin-bottom: 16px;
  display: flex;
}

.detail-label {
  width: 120px;
  color: #64748b;
  font-weight: 500;
}

.detail-value {
  flex: 1;
}

/* 代码块样式 */
.code-block {
  background: #f8fafc;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  margin: 16px 0;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .title-container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .title-container .right {
    margin-top: 12px;
    width: 100%;
  }
  
  .search-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-container .el-form-item {
    margin-bottom: 12px;
  }
  
  .detail-item {
    flex-direction: column;
  }
  
  .detail-label {
    width: 100%;
    margin-bottom: 4px;
  }
}

/* 按钮样式 */
.primary-btn {
  background: linear-gradient(to right, #1a237e, #3949ab);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(26, 35, 126, 0.2);
}

.primary-btn:hover {
  background: linear-gradient(to right, #0d1b69, #2c3c9e);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 35, 126, 0.3);
}

.primary-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(26, 35, 126, 0.2);
}

/* 卡片布局 */
.api-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.api-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.api-card-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.api-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a237e;
  margin: 0;
}

.api-card-body {
  padding: 16px;
}

.api-card-footer {
  padding: 12px 16px;
  background: #f9fafb;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  padding: 40px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  color: #d9d9d9;
  margin-bottom: 16px;
}

.empty-text {
  color: #64748b;
  margin-bottom: 16px;
}

/* 标签和徽章 */
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 8px;
}

.tag.blue {
  background-color: #e6f4ff;
  color: #1677ff;
  border: 1px solid #91caff;
}

.tag.green {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.tag.orange {
  background-color: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffe7ba;
}

.tag.red {
  background-color: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.tag.purple {
  background-color: #f9f0ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  text-align: center;
  background: #ff4d4f;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #fff;
}
</style>
